<template>
  <fieldset>
    <meta name="referrer" content="no-referrer" />
    <legend>详情页</legend>
    <h1 class="title">商品名称:{{ goods.title }}</h1>
    <h3>价格:{{ goods.price }}</h3>
    <h4>商品描述:{{ goods.desc }}</h4>
    <img width="300" :src="goods.pic" alt="" />
  </fieldset>
</template>
<script>
//导入请求的方法
import { getGoodsList } from "@/api";
export default {
  props:['id'],
  data() {
    return {
      goods: {},
    };
  },
  created() {
    //发送请求获取数据
    //id是通过动态路由参数传递
    // let { id } = this.$route.params;
    //获取动态参数id，向后台发请求，获取数据
    // console.log(id);

    // 动态路由参数解耦合之后，可以通过this来获取动态路由参数，而不是通过$route.params来获取
    let id = this.id

    getGoodsList(id)
      .then((res) => {
        console.log(res);
        this.goods = res;
      })
      .catch((err) => {
        alert("数据获取异常，错误信息:" + err.errormsg);
      });
  },
  mounted() {
    //$router是根路由对象，里面包含了$route的所有属性
    //$route是当前页面的路由对象
    //通过$route.params.XX
    // console.log(this.$router);
    // console.log(this.$route);
  },
};
</script>
